<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 时间-品牌-门店-区域-机台名称-搜索 -->
            <dj-search-tbst ref="search" @fetchData="fetchData" categoryId="295"></dj-search-tbst>
            <el-table highlight-current-row show-summary :data="list" v-loading.body="listLoading" border
                :summary-method="getSummaries" size="small">
                <el-table-column align="center" prop="char_project_type" label="机台名称" sortable>
                    <template slot-scope="scope">
                        <el-button type="text" @click="goPage(scope.row)">{{scope.row.project_type}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="char_project_type_first" label="机台类型" sortable>
                    <template slot-scope="scope">
                        {{scope.row.project_type_first}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="机台标签">
                    <template slot-scope="scope">
                        {{scope.row.is_check==1?'考核类':'非考核类'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="push_coins" label="总收币数" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'刷卡扣币+扫码上币')"></el-table-column>
                <el-table-column align="center" prop="push_money" label="收币金额" sortable  :render-header="(h,obj) => renderHeader(h,obj,'收币金额=机台收币数x当前币值')"></el-table-column>
                <el-table-column align="center" prop="sweep_money" label="扫码支付金额" sortable></el-table-column>
                <el-table-column align="center" prop="times" label="游玩次数" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'扫码和刷卡游玩的总局')"></el-table-column>
                <el-table-column align="center" prop="machine_num" label="当前机台数" sortable></el-table-column>
                <el-table-column align="center" prop="days" label="运营总天数" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'支持出货机台为日报天数;不支持出货机台为有收入天数')"></el-table-column>
                <el-table-column align="center" prop="day_money" label="日均单机台收入" sortable width="150"
                    :render-header="(h,obj) => renderHeader(h,obj,'日均收入金额= （收币金额+扫码支付金额）/运营天数')"></el-table-column>
                <el-table-column align="center" prop="tickets" label="出票数" sortable width="90"></el-table-column>
                <el-table-column align="center" prop="gift_cost" label="出货成本" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'出货成本=出货数*成本单价')"></el-table-column>
                <el-table-column align="center" prop="profit" label="日均毛利" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'日均毛利=（收币金额+扫码支付金额-出货成本）/运营天数')"></el-table-column>
                <el-table-column align="center" prop="grossprofit" label="总毛利率" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'总毛利率=（收币金额+扫码支付金额-出货成本）/（收币金额+扫码支付金额）')">
                    <template slot-scope="scope">
                        {{scope.row.grossprofit+'%'}}
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import {
        getList,
    } from "@/api/storage_control/same_machine_gain_form";
    import { renderHeader } from '@/utils';
    export default {
        data() {
            return {
                renderHeader,
                listLoading: false,
                list: [],
                pickerDate: [],
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                vm.toValue = vm.$route.params;
                vm.$refs.search.beforeComingIn(vm.$route.params);
            })
        },
        methods: {
            goPage(row) {
                this.$router.push({
                    name: 'report/one_machine_gain_form',
                    params: {
                        store_id: row.store_id,
                        project_type: row.project_type_first_id,
                        look_del: row.look_del,
                        pickerDate: this.pickerDate,
                        machine_name: row.type_id,
                        is_check: row.is_check,
                        from: 2 //1.同类机台跳转，2.同款机台跳转，
                    }
                })
            },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    if (index === 8) {
                        sums[index] = '-';
                        return;
                    }
                    if (index === 13) {
                        sums[index] = (sums[4] * 1 + sums[5] * 1) == 0 ? '0%' : (((sums[4] * 1 + sums[5] * 1 - sums[11] * 1) / (sums[4] * 1 + sums[5] * 1) * 100).toFixed(2) * 1 + '%');
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (index > 0) {
                        if (!values.every(value => isNaN(value))) {
                            sums[index] = values.reduce((prev, curr) => {
                                const value = Number(curr);
                                if (!isNaN(value)) {
                                    return prev + curr;
                                } else {
                                    return prev;
                                }
                            }, 0);
                            sums[index] = (sums[index] * 1).toFixed(2) * 1;
                        } else {
                            sums[index] = '-';
                        }
                    }
                });
                return sums;
            },
            // 列表获取
            fetchData(formInline) {
                this.pickerDate = [formInline.begin_time, formInline.end_time];
                this.look_del=formInline.look_del;
                this.listLoading = true;
                getList(formInline).then(response => {
                    response.forEach(function (val, i) {
                        val.no *= 1;
                        val.look_del=formInline.look_del;
                        val.push_coins *= 1;
                        val.tickets *= 1;
                        val.push_money = (val.push_money / 1000000).toFixed(2) * 1;
                        val.sweep_count *= 1;
                        val.sweep_money = (val.sweep_money / 1000000).toFixed(2) * 1;
                        val.times = val.push_count * 1 + val.sweep_count * 1;
                        val.gift_cost = (val.gift_cost / 1000000).toFixed(2) * 1;
                        val.profit = ((val.push_money * 1 + val.sweep_money * 1 - val.gift_cost * 1) / val.days * 1).toFixed(2) * 1
                        val.grossprofit = (val.push_money * 1 + val.sweep_money * 1) == 0 ? '0.00' : ((val.push_money * 1 + val.sweep_money * 1 - val.gift_cost * 1) / (val.push_money * 1 + val.sweep_money * 1) * 100).toFixed(2) * 1
                        val.day_money = ((val.push_money * 1 + val.sweep_money * 1) / val.days * 1).toFixed(2) * 1
                    });
                    this.list = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    };
</script>